iT邦幫忙

2024 iThome 鐵人賽

DAY 23
0
Modern Web

GitHub Pages實作筆記系列 第 23

DAY23 noscript

  • 分享至 

  • xImage
  •  

有些瀏覽器可能會禁用JavaScript,而之前做的讀取畫面是透過JavaScript來隱藏的,那在禁用JavaScript的瀏覽器中,讀取畫面就會一直存在,無法進入主畫面。在這種情況,就需要用<noscript>標籤來顯示替代內容。
這裡我希望將讀取畫面隱藏之後加上提示訊息,提醒使用者啟用JavaScript。

先隱藏讀取畫面

<noscript>
  <style>
    .loading{
      opacity: 0;
    }
  </style>
</noscript>

加上提示訊息

<noscript>
  <p> 您的瀏覽器不支援 JavaScript,或 JavaScript 已被禁用。請啟用 JavaScript 以獲取完整體驗。 </p>
</noscript>

更改完後測試一下,這裡以Chrome為例,到設定>隱私權和安全性>網站設定>JavaScript,選擇禁用。
https://ithelp.ithome.com.tw/upload/images/20241004/20169370B4vaQohoEG.png

最後,可以看到在禁用JavaScript後,讀取畫面成功加上另外設定的style。
https://ithelp.ithome.com.tw/upload/images/20241004/201693700fAgAIEkb6.png

參考資料/延伸閱讀

  1. MDN-noscript

上一篇
DAY22 分享預覽
下一篇
DAY24 前端優化-預先載入
系列文
GitHub Pages實作筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言